<template>
  <div class="work-space">
    <h1 class="title-pad">MEIDENPDA</h1>

    <div style="margin-bottom: 10px" v-show="tabbarIndex == 0">
      <van-cell-group>
        <van-field
          v-model="IP"
          label="当前用户"
          size="large"
          clearable
          placeholder="0.0.0.0"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="IP"
          label="登录时间"
          size="large"
          clearable
          placeholder="0.0.0.0"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="IP"
          label="设备编号"
          size="large"
          clearable
          placeholder="0.0.0.0"
        />
      </van-cell-group>
      <van-cell-group>
        <van-field
          v-model="IP"
          label="IP地址"
          size="large"
          clearable
          placeholder="0.0.0.0"
        />
      </van-cell-group>
      <van-button
        size="large"
        type="primary"
        style="margin-top: 20px"
        @click="setPORT"
        >设 定</van-button
      >
      <van-button
        size="large"
        type="primary"
        style="margin-top: 20px"
        @click="setPORT"
        >重新拉取数据</van-button
      >
    </div>
    <h1 class="title-cz" v-show="tabbarIndex == 1">产线搬运</h1>
    <div v-show="tabbarIndex == 1">
      <van-row type="flex" class="icon-list" justify="space-between">
        <van-col span="6" @click="SubAssembly">
          <div class="icon-img">
            <img src="../assets/发货.png" alt="" />
          </div>
          <div class="icon-topic">产线发货</div>
        </van-col>
      </van-row>
    </div>

    <h1 class="title-cz" v-show="tabbarIndex == 1">人工操作</h1>
    <div v-show="tabbarIndex == 1">
      <van-row type="flex" class="icon-list" justify="space-between">
        <van-col span="6" @click="untie">
          <div class="icon-img">
            <img src="../assets/解绑.png" alt="" />
          </div>
          <div class="icon-topic">托盘解绑</div>
        </van-col>
        <!-- <van-col span="6" @click="SubAssembly">
          <div class="icon-img">
            <img src="../assets/logo.png" alt="" />
          </div>
          <div class="icon-topic">
            dolly绑定 <br />
            (分总成)
          </div>
        </van-col>
        <van-col span="6" @click="SecondLevelCache">
          <div class="icon-img">
            <img src="../assets/logo.png" alt="" />
          </div>
          <div class="icon-topic">
            dolly绑定 <br />
            (二级缓存)
          </div>
        </van-col> -->
      </van-row>
      <!-- <van-row type="flex" class="icon-list" justify="space-between">
        <van-col span="6" @click="untie"
          ><div class="icon-img">
            <img src="../assets/logo.png" alt="" />
          </div>
          <div class="icon-topic">dolly解绑(通用)</div></van-col
        >
      </van-row> -->
    </div>
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item>
        <span>首页</span>
        <template #icon>
          <van-icon name="home-o" />
          <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="search">
        <span>任务</span>
        <template #icon>
          <van-icon name="todo-list-o" />
        </template>
      </van-tabbar-item>
      <!-- <van-tabbar-item icon="setting-o">标签</van-tabbar-item> -->
    </van-tabbar>
  </div>
</template>

<script>
import { Toast } from "vant";

// import SelWorkBench from "@/components/SelWorkBench.vue";
// import MessageCard from "@/components/MessageCard.vue";
// import Legend from "@/components/Legend.vue";
// import ReturnEmpty from "@/components/ReturnEmpty.vue";
// import Html2Canvas from "@/components/Html2Canvas.vue";
// import BarCodeReprint from "@/components/BarCodeReprint.vue";
// import ScanComponent from "./ScanComponent.vue";
// import { columns, columnsS } from "./tableColumns";
// import { api } from "@/utils/api";
// import { comparedArr, removeListItem } from "@/utils/tools";
// import axios from "axios";
// import _ from "lodash";
// import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
// import moment from "moment";
// import { InitLoc } from "@/utils/sortLoc";
// import TableSwitch from "@/components/TableSwitch.vue";
// import { mockSort } from "./mockSortData";
export default {
  name: "WorkBench",
  components: {},
  props: {
    msg: String,
  },
  computed: {
    // userName: () => {
    //   return sessionStorage.getItem("userName");
    // },
  },
  data: () => {
    return {
      IP: "",
      tabbarIndex: 1,
      active: 1,
      icon: {
        active: "https://img01.yzcdn.cn/vant/user-active.png",
        inactive: "https://img01.yzcdn.cn/vant/user-inactive.png",
      },
    };
  },
  watch: {},
  created() {},
  mounted() {
    this.IP = localStorage.getItem("IP");
    // this.startScanning();
  },
  destroyed: function () {},
  methods: {
    startScanning() {
      navigator.mediaDevices
        .getUserMedia({
          video: {
            facingMode: { exact: "environment" },
            // width: 1280,
            // height: 1280
            width: 640,
            height: 640,
            zoom: 5,
          },
        })
        .then((stream) => {
          console.log("window.navigator", navigator.mediaDevices, stream);

          // video.srcObject = stream;

          // const codeReader = new ZXing.BrowserMultiFormatReader();
          // codeReader
          //   .decodeFromVideoElement(video)
          //   .then((result) => {
          //     result = result.text;
          //     console.log("扫码结果：", result);
          //     successMsg(result);
          //     if (result.startsWith("JIAOHUODAN_")) {
          //       // 交货单
          //       that.findDeliveryOrder(result);
          //     } else if (result.startsWith("DABAOXIANG_")) {
          //       // 箱号
          //       that.updateMaterialActualNum(result);
          //     } else {
          //       // warnMsg('扫描的二维码不符合规范！！')
          //     }
          //     // 处理扫码结果...
          //     setTimeout(() => {
          //       startScanning();
          //     }, 1000);
          //   })
          //   .catch((err) => {
          //     // alert(err)
          //     console.error(err);
          //   });
        })
        .catch((err) => {
          console.error(err);
        });
    },
    query() {
      console.log("查询");
      this.$router.push("/library-query");
    },
    untie() {
      this.$router.push("/untie");
    },
    SubAssembly() {
      this.$router.push("/sub-assembly");
    },
    SecondLevelCache() {
      this.$router.push("/second-level-cache");
    },
    onChange(index) {
      this.tabbarIndex = index;
      console.log(index);
    },
    setPORT() {
      const ipPortRegex =
        /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?):(\d{1,5})$/;
      // 使用正则表达式测试字符串
      if (ipPortRegex.test(this.IP)) {
        console.log("IP地址和端口号匹配成功！");
        localStorage.setItem("IP", this.IP);
        Toast.success("设定成功");
      } else {
        Toast.fail("IP地址和端口号不匹配");
        console.log("IP地址和端口号不匹配。");
      }
    },
  },
};
</script>

<style scoped lang="scss">
.work-space {
  padding: 10px;
  /deep/ .van-col {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    border: 1px solid #212121;
    border-radius: 5px;
  }
  .title-pad {
    padding: 10px 0px 10px 10px;
    box-sizing: border-box;
    background: #212121;
    color: #fff;
    font-size: 30px;
  }
  .title-cz {
    font-size: 24px;
  }
  .icon-list {
    img {
      padding: 5px 0 0 0;
      box-sizing: border-box;
      width: 60px;
      height: 60px;
    }
    .icon-img {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .icon-topic {
      // border: 1px solid blue;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      height: 40px;
      font-size: 13px;
      font-weight: bold;
    }
  }
}
.title {
  font-size: 16px;
}
</style>
